<template>
  <div class="footer-drawer">
    <div class="main">
      <ul class="left">
        <li @click="btnClick({id:1000,title:$t('userInfo'),path:'https://www.hao123.com/'})">{{$t('userInfo')}}</li>
        <li @click="btnClick({id:1000,title:$t('companyHome'),path:'https://www.hao123.com/'})">{{$t('companyHome')}}</li>
      </ul>
      <ul class="right">
        <li><span>{{$t('share')}}</span></li>
        <li><span>{{$t('picture')}}</span></li>
        <li><span>{{$t('music')}}</span></li>
        <li><span>{{$t('download')}}</span></li>
        <a-divider style="margin: 12px 0"/>
        <li @click="btnClick({id:999,title:$t('setting'),path:'#/window/setting/system'})"><span>{{$t('setting')}}</span></li>
        <li @click="btnClick({id:999,title:$t('setting'),path:'#/window/setting/theme'})"><span>{{$t('theme')}}</span></li>
        <li @click="btnClick({id:999,title:$t('setting'),path:'#/window/setting/wallpaper'})"><span>{{$t('wallpaper')}}</span></li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  name: 'FooterDrawer',
  props:['winVisible'],
  i18n: require('./i18n'),
  methods:{
    ...mapMutations('window',['open']),
    btnClick(target){
      this.$emit('update:winVisible',false)
      this.open(target);
    }
  }
}
</script>
<style lang="less">
  .footer-drawer {
    .main{
      border: solid 1px #102a3e;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      padding: 7px;
      -webkit-border-radius: 5px;
      box-shadow: inset 0 0 1px #fff;
      -webkit-box-shadow: inset 0 0 1px #fff;
      background: rgba(0,0,0,0.7);
      ul{
        padding: 0;
        list-style: none;
        li{
          cursor: pointer;
        }
      }
      .left{
        display: inline-block;
        opacity:1;
        background-color: rgba(255,255,255,1);
        border: solid 1px #365167;
        height: 385px;
        box-shadow: 0 0 1px #fff;
        width: 250px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-shadow: 0 0 1px #fff;
        li{
          border: solid 1px transparent;
          display: block;
          padding: 3px;
          height: 30px;
          line-height: 24px;
          margin: 3px 10px;
          color: #4b4b4b;
          text-decoration: none;
        }
        li:hover{
          border: solid 1px #7da2ce;
          -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
          border-radius: 3px;
          -webkit-box-shadow: inset 0 0 1px #fff;
          -moz-box-shadow: inset 0 0 1px #fff;
          box-shadow: inset 0 0 1px #fff;
          background-color: #cfe3fd;
          background: -webkit-gradient(linear,center top,center bottom,from(#dcebfd),to(#c2dcfd));
        }
      }
      .right{
        float: right;
        display: inline-block;
        margin-left: 10px;
        li {
          border: solid 1px transparent;
          display: block;
          margin: 5px 0;
          position: relative;
          color: #fff;
          text-decoration: none;
          min-width: 120px;
          span{
            padding: 5px;
            padding-left: 10px;
            display: block;
          }
        }
        li:hover{
          border: solid 1px #000;
          -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
          border-radius: 3px;
          -webkit-box-shadow: 0 0 1px #fff;
          -moz-box-shadow: 0 0 1px #fff;
          box-shadow: 0 0 1px #fff;
          background-color: #658da0;
          background: -webkit-gradient(linear,0% 100%,100% 100%,from(#517384),color-stop(50%,#79a3b8),to(#517384));
          span{
            background: -webkit-gradient(linear,center top,center bottom,from(transparent),color-stop(49%,transparent),color-stop(50%,rgba(2,37,58,0.5)),to(rgba(63,111,135,0.5)));
          }
        }
         
      }
    }
  }
</style>